/**
 * Created by Administrator on 2019/3/9
 * Function:
 * Desc:
 */
import React, {Component} from 'react';
import {ImageBackground, ScrollView, StyleSheet, Text, TouchableOpacity, View, Image} from 'react-native';

let arrays = {};
let showMode = 'row';

//单元格组件
class Item extends Component {
    render() {
        return (
            <View style={styles.item}>
                <TouchableOpacity onPress={this.props.press}>
                    <ImageBackground resizeMode="stretch" style={styles.img} source={{uri: this.props.url}}>
                        <Text numberOfLines={1} style={styles.item_text}>{this.props.title}</Text>
                    </ImageBackground>
                </TouchableOpacity>
            </View>
        );
    }
}

//空的单元格组件（用来填充空白）
class Item1 extends Component {
    render() {
        return (
            <View style={styles.item1}>

            </View>
        );
    }
}

//列表组件
export default class List_Double extends Component {
    render() {
        let data = Goods;
        let list = [];

        for (let i in data) {
            if (i % 2 === 0) {
                let row;
                if ((i*1) === (data.length-1)) {
                    row = (
                        <View key={i} style={styles.row}>
                            <Item
                                url={data[i].url}
                                title={data[i].title}
                                press={this.press.bind(this, data[i])}/>
                            <Item1/>
                        </View>);
                } else {
                    row = (
                        <View key={i} style={styles.row}>
                            <Item
                                url={data[i].url}
                                title={data[i].title}
                                press={this.press.bind(this, data[i])}/>
                            <Item
                                url={data[parseInt(i) + 1].url}
                                title={data[parseInt(i) + 1].title}
                                press={this.press.bind(this, data[parseInt(i) + 1])}/>
                        </View>);
                }

                list.push(row);
            }
        }

        return (
            <ScrollView
                style={{marginTop: 5,marginBottom:20}}
                showsVerticalScrollIndicator={false}
            >
                {list}
            </ScrollView>
        );
    }

    press(data) {
        alert("您选择了：" + data.title);
    }
}

//样式定义
const styles = StyleSheet.create({
    flex: {
        flex: 1,
        marginTop: 20
    },
    row: {
        flexDirection: 'row',
        marginBottom: 10,
    },
    item: {
        flex: 1,
        flexDirection: 'column',
        marginLeft: 5,
        marginRight: 5,
        height: 140,
        borderWidth: 1,
        borderColor: '#ddd',
    },
    item1: {
        flex: 1,
        marginLeft: 5,
        marginRight: 5,
        height: 140,
    },
    img: {
        //flex:1,
        backgroundColor: 'transparent'
    },
    item_text: {
        backgroundColor: '#000',
        opacity: 0.5,
        color: '#fff',
        height: 25,
        lineHeight: 25,
        textAlign: 'center',
        marginTop:114,
    },
});


//商品数据集合
let Goods = [
    {
        title: '空气净化器',
        url: 'http://img.muji.com.cn/img/item/4547315820665_400.jpg'
    },
    {
        title: '棉不均匀染色开衫棉不均匀染色开衫',
        url: 'http://img.muji.com.cn/img/item/4549738656746_400.jpg'
    },
    {
        title: '硅胶球形制冰器',
        url: 'http://img.muji.com.cn/img/item/4549738306771_400.jpg'
    },
    {
        title: '组合柜',
        url: 'http://img.muji.com.cn/img/item/4549337263215_400.jpg'
    },
    {
        title: '牛奶巧克力',
        url: 'http://img.muji.com.cn/img/item/4549738664512_400.jpg'
    },
    {
        title: '空气净化器',
        url: 'http://img.muji.com.cn/img/item/4547315820665_400.jpg'
    },
    {
        title: '棉不均匀染色开衫',
        url: 'http://img.muji.com.cn/img/item/4549738656746_400.jpg'
    },
    {
        title: '硅胶球形制冰器',
        url: 'http://img.muji.com.cn/img/item/4549738306771_400.jpg'
    },
    {
        title: '组合柜',
        url: 'http://img.muji.com.cn/img/item/4549337263215_400.jpg'
    },
    {
        title: '牛奶巧克力',
        url: 'http://img.muji.com.cn/img/item/4549738664512_400.jpg'
    },
    {
        title: '空气净化器',
        url: 'http://img.muji.com.cn/img/item/4547315820665_400.jpg'
    },
    {
        title: '棉不均匀染色开衫',
        url: 'http://img.muji.com.cn/img/item/4549738656746_400.jpg'
    },
    {
        title: '硅胶球形制冰器',
        url: 'http://img.muji.com.cn/img/item/4549738306771_400.jpg'
    },
    {
        title: '组合柜',
        url: 'http://img.muji.com.cn/img/item/4549337263215_400.jpg'
    },
    {
        title: '福字',
        url: 'http://www.158pic.com/uploads/allimg/150403/10-1504031H411E6.jpg'
    },

];